<template>
    <div class="bg">
        <div class="in">
            <div class="im">
                <img src="@/assets/logo.png" alt="">
                <h1>企业家</h1>
            </div>
            <div class="st">
                <div>
                    <span>用户名</span>
                    <input type="text" v-model="account">
                </div>
                <div>
                    <span>&nbsp&nbsp&nbsp密码</span>
                    <input type="password" v-model="password">
                </div>
            </div>
            <div class="dl">
                <button @click="loginSubmit">登&nbsp&nbsp&nbsp录</button>
                <van-button ref="toHomeBtnRef" type="primary" to="/" replace style="display: none;">路由跳转</van-button>
            </div>
        </div>
    </div>
</template>
<script>
import { ref } from 'vue'
import { Toast } from 'vant';
import router from '@/router'

export default {
    setup() {
        const toHomeBtnRef = ref(null)
        const account = ref("admin");
        const password = ref("123456");
        const userList = [{
            account: "admin",
            password: "123456"
        }]
        const loginSubmit = () => {
            try {
                if (!account.value) {
                    Toast("账号不能为空！")
                    return;
                }
                if (!password.value) {
                    Toast("密码不能为空！")
                    return;
                }
                console.log(toHomeBtnRef.value);
                const user = userList.filter(function (x) { return x.account == account.value && x.password == password.value })
                if (user.length > 0) {
                    sessionStorage.setItem("_sessionlogin", JSON.stringify(user[0]));
                    router.replace("/")
                } else {
                    Toast("用户名或密码不正确！")
                    return;
                }
            } catch (errors) {
                Toast(errors)
            }
        }
        return {
            account,
            password,
            loginSubmit,
            toHomeBtnRef
        }
    }
}
</script>
<style>
/* body,
html {
    height: 100%;
    margin: 0px;
    padding: 0px;
} */

.bg {
    /* background-image: url("/assets/350.jpg"); */
    position: relative;
    background-color: #2c3e50;
    height: -webkit-fill-available;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.in {
    position: absolute;
    left: 35%;
    top: 18%;
}

.im {
    padding-left: 31%;
    display: flex;
}

.im h1 {
    color: white;
    font-size: 30px;
}

.im img {
    width: 32%;
    height: 30%;
}

.st {
    margin-top: 10%;
}

.st div {
    margin-top: 10%;
}

.st span {
    color: white;
    font-size: 18px;
    margin-right: 20px;
}

.st input {
    width: 200px;
    height: 25px;
    line-height: 25px;
}

.dl {
    margin-top: 15%;
}

.dl button {
    width: 285px;
    height: 40px;
    line-height: 30px;
    font-size: 18px;
    background-color: #ed143d;
    outline: none;
    border-radius: 10px;
    border: none;
    color: white;
}
</style>